<template>

  <div id="map">
    <!--&lt;!&ndash;      <div id="control">&ndash;&gt;-->
    <!--        <span id="control">地图名称:淮安市涟水县</span>-->
    <!--&lt;!&ndash;      </div>&ndash;&gt;-->
    <div class="control">
      <div class="commonStyle" style="background:#A9A9A9" @click="findBzCustomer(1)">普通客户
      </div>
      <div class="commonStyle"
           style="background:#DAA520"
      >白银客户
      </div>
      <div class="commonStyle"
           style="background:#d4237a"
      >黄金客户
      </div>
      <div class="commonStyle"
           style="background:#1296db"
      >铂金客户
      </div>
      <div class="commonStyle"
           style="background:#d81e06"
      >钻石客户
      </div>
    </div>
  </div>
</template>

<script>

let BM, map = ''

import { findCustmoerInfo, findGridInfo } from '@/api/buss/grid'

export default {
  name: 'index',
  components: {},
  data() {
    return {
      Jingdu: '',
      Weidu: '',
      list: [],
      csutomerList: []
    }
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      this.loading = true
      findGridInfo(this.queryParams).then(response => {
        this.list = response
        this.findCustomer()

      })
    },
    findCustomer() {
      findCustmoerInfo(this.queryParams).then(response => {
        this.csutomerList = response
        this.initBigmap()

      })
    },
    findBzCustomer(flag) {
      console.log('--flag----' + flag)
    },
    /**
     * 关闭窗口
     */
    closeWin() {
      this.isShow = false
      this.isShowDetail = false
      this.init()

    },
    initBigmap() {
      BM = window.BM
      BM.Config.HTTP_URL = 'http://218.2.33.94:3000'
      if (map != '') {
        map.remove()
      }

      map = BM.map('map', 'bigemap.41vpfqyj', {
        crs: BM.CRS.Baidu,
        center: [33.78199202, 119.25712824],
        zoom: 15,
        zoomControl: true
      })
      /**
       * 绘制网格
       */
      if (this.list.length > 0) {
        for (let k in this.list) {
          (function(item) {
            // item.path.forEach(h => {
            //   [h[0], h[1]] = [h[1], h[0]]
            // })
            //创建多边形，并设置填充颜色为红色 ，具体详细API请参见：http://www.bigemap.com/offlinemaps/api/#polygon
            let arrs = []
            let obj = JSON.parse(item['latandlng'])
            obj.map(v => {
              arrs.push([v[1], v[0]])
            })
            let stylesColor = ['#102b6a', '#f69c9f', '#5f3c23', '#2e3a1f', '#426ab3', '#f58f98', '#6b473c', '#4d4f36', '#46485f', '#ca8687', '#faa755', '#b7ba6b', '#4e72b8', '#f391a9', '#fab27b', '#b2d235', '#181d4b', '#bd6758', '#f58220', '#5c7a29', '#1a2933', '#d71345', '#843900', '#bed742', '#121a2a', '#d64f44', '#905d1d', '#7fb80e', '#0c212b', '#d93a49', '#8a5d19', '#a3cf62', '#6a6da9', '#b3424a', '#8c531b', '#769149', '#585eaa', '#c76968', '#826858', '#6d8346', '#494e8f', '#bb505d', '#64492b', '#78a355', '#afb4db', '#987165', '#ae6642', '#abc88b', '#9b95c9', '#ac6767', '#56452d', '#74905d', '#6950a1', '#973c3f', '#96582a', '#cde6c7', '#6f60aa', '#b22c46', '#705628', '#1d953f', '#867892', '#a7324a', '#4a3113', '#77ac98', '#918597', '#aa363d', '#412f1f', '#007d65', '#6f6d85', '#ed1941', '#845538', '#84bf96', '#594c6d', '#f26522', '#8e7437', '#45b97c', '#694d9f', '#d2553d', '#69541b', '#225a1f', '#6f599c', '#b4534b', '#d5c59f', '#367459', '#8552a1', '#ef4136', '#cd9a5b', '#007947', '#543044', '#c63c26', '#cd9a5b', '#40835e', '#63434f', '#f3715c', '#b36d41', '#2b6447', '#7d5886', '#a7573b', '#df9464', '#005831', '#401c44', '#aa2116', '#b76f40', '#006c54', '#472d56', '#b64533', '#ad8b3d', '#375830', '#45224a', '#b54334', '#dea32c', '#274d3d', '#411445', '#853f04', '#d1923f', '#375830', '#4b2f3d', '#840228', '#c88400', '#27342b', '#402e4c', '#7a1723', '#c37e00', '#65c294', '#c77eb5', '#a03939', '#c37e00', '#73b9a2', '#ea66a6', '#8a2e3b', '#e0861a', '#72baa7', '#f173ac', '#8e453f', '#ffce7b', '#005344', '#fffffb', '#8f4b4a', '#fcaf17', '#122e29', '#fffef9', '#892f1b', '#ba8448', '#293047', '#f6f5ec', '#6b2c25', '#896a45', '#00ae9d', '#d9d6c3', '#733a31', '#76624c', '#508a88', '#d1c7b7', '#54211d', '#6d5826', '#70a19f', '#f2eada', '#78331e', '#ffc20e', '#50b7c1', '#d3d7d4', '#53261f', '#fdb933', '#00a6ac', '#999d9c', '#f15a22', '#d3c6a6', '#78cdd1', '#a1a3a6', '#b4533c', '#c7a252', '#008792', '#9d9087', '#84331f', '#dec674', '#94d6da', '#8a8c8e', '#f47a55', '#b69968', '#afdfe4', '#74787c', '#f15a22', '#c1a173', '#5e7c85', '#7c8577', '#f3704b', '#dbce8f', '#76becc', '#72777b', '#da765b', '#ffd400', '#90d7ec', '#77787b', '#c85d44', '#ffd400', '#009ad6', '#4f5555', '#ae5039', '#ffe600', '#145b7d', '#6c4c49', '#6a3427', '#f0dc70', '#11264f', '#563624', '#8f4b38', '#fcf16e', '#7bbfea', '#3e4145', '#8e3e1f', '#decb00', '#33a3dc', '#3c3645', '#f36c21', '#cbc547', '#228fbd', '#464547', '#b4532a', '#6e6b41', '#2468a2', '#130c0e', '#b7704f', '#596032', '#2570a1', '#281f1d', '#de773f', '#525f42', '#2585a6', '#2f271d', '#c99979', '#5f5d46', '#1b315e', '#1d1626']
            let polygon = BM.polygon(arrs, { color: stylesColor[k], weight: 10 }).on('mouseover', function(e) {
              this.setStyle({
                color: 'white',
                fillColor: '#0c212b',
                weight: 10,
                fillOpacity: 0.3,
                fontWeight: 900
              })
            }).on('mouseout', function(e) {
              this.setStyle({
                color: stylesColor[k],
                fillColor: '#0c212b',
                weight: 10,
                fillOpacity: 0
              })
            }).addTo(map)
            // 让地图适配当前的线段
            // map.fitBounds(polygon.getBounds())
            //给多边形添加一个文字描述，更多API请参见 http://www.bigemap.com/offlinemaps/api/#tooltip-example
            let fontColor = stylesColor[k]
            let quyu = `<div style="color:${fontColor};font-weight: 777">${item['gridName']}</div>`
            polygon.bindTooltip(quyu, { permanent: true })
            // polygon.on('click', function (e) {
            //   alert('我被点击了!')
            // })
          })(this.list[k])
        }

      }
      this.customerDingWei();

    },
    customerDingWei(){
      /**
       * 客户信息定位
       */
      let marker = []
      this.csutomerList.forEach((item, i) => {
        let a = ''
        let myIcon = ''
        //普通客户
        if (item.customerLevelZh == 1) {
          a = `<div style="color: #A9A9A9" onClick="ShowDetail('${item.id}')">${item.name}</div>`
          myIcon = BM.icon({
            iconUrl: '/icon/silver.png',
            iconSize: [40, 40],
            iconAnchor: [15, 30]
          })
          //白银
        } else if (item.customerLevelZh == 2) {
          a = `<div style="color: #DAA520" onClick="ShowDetail('${item.id}')">${item.name}</div>`
          myIcon = BM.icon({
            iconUrl: '/icon/glod.png',
            iconSize: [40, 40],
            iconAnchor: [15, 30]
          })
          //黄金
        } else if (item.customerLevelZh == 3) {
          a = `<div style="color: #d4237a" onClick="ShowDetail('${item.id}')">${item.name}</div>`
          myIcon = BM.icon({
            iconUrl: '/icon/atinum.png',
            iconSize: [40, 60],
            iconAnchor: [15, 30]
          })
          //铂金
        } else if (item.customerLevelZh == 4) {
          a = `<div style="color: #1296db" onClick="ShowDetail('${item.id}')">${item.name}</div>`
          myIcon = BM.icon({
            iconUrl: '/icon/platinum.png',
            iconSize: [40, 40],
            iconAnchor: [15, 30]

          })

          //钻石
        } else {
          a = `<div style="color: #d81e06 " onClick="ShowDetail('${item.id}')">${item.name}</div>`
          myIcon = BM.icon({
            iconUrl: '/icon/diamond.png',
            iconSize: [40, 40],
            iconAnchor: [15, 30]

          })
        }

        let path = [item.luojiWeidu, item.luojiJingdu]
        let latAndLng = BM.marker(path, { icon: myIcon }).bindTooltip(a, {
          permanent: true,
          interactive: true
        }).openTooltip()
        let center = map.getCenter()
        let latLng = latAndLng.getLatLng()
        let distance = map.distance(center, latLng)
        //如果距离当前中心点小于500就显示
        if (distance < 10000) {
          latAndLng.addTo(map)
        }
        latAndLng.addTo(map)
        marker.push(latAndLng)
      })

      map.on('zoomend', function(e) {
        let center = map.getCenter()
        marker.forEach(item => {
          let latLng = item.getLatLng()
          let distance = map.distance(center, latLng)
          //如果距离当前中心点小于500就显示
          if (distance < 10000) {
            item.addTo(map)
          } else {
            item.remove()
          }

        })

      })
    }
  }
}

</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

/deep/ .bigemap-left {
  display: none;
}

/deep/ .bigemap-right {
  display: none;
}

.control {
  padding: 10px;
  position: absolute;
  z-index: 9;
  right: 0px;
}


#map {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.commonStyle {
  color: #fff;
  border-color: #2e6da4;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.commonStyle :active{
  background: #F0F0F0;
}
</style>
